<template>
  <Info></Info>
  <div class="tabs">
    <el-tabs v-model="activeName" class="demo-tabs">
      <el-tab-pane v-for="item in tabList" :label="item.label" :name="item.name">
        <component v-if="activeName === item.name" :is="item.component" :id="id" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script lang="ts" setup>
import { useArtistStore } from '@/stores/artist'
import { useRoute } from 'vue-router'
import Info from './component/Info.vue'
import { shallowRef, ref, toRefs } from 'vue'
import SongTab from './component/SongTab.vue'
import AlbumTab from './component/AlbumTab.vue'
import MvTab from './component/MvTab.vue'
import DescTab from './component/DescTab.vue'

interface TabItem {
  label: string
  name: string
  component: typeof SongTab | typeof AlbumTab | typeof MvTab | typeof DescTab
}

const route = useRoute()

const { query } = route
const id = Number(query.id)

const { getBaseInfo, baseInfo } = toRefs(useArtistStore())

let tabList = shallowRef<TabItem[]>([])

const getArtistInfo = async () => {
  await getBaseInfo.value(id)
  tabList.value = [
    {
      label: `歌曲 ${baseInfo.value?.artist.musicSize}`,
      name: 'music',
      component: SongTab,
    },
    {
      label: `专辑 ${baseInfo.value?.artist.albumSize}`,
      name: 'album',
      component: AlbumTab,
    },
    {
      label: `视频 ${baseInfo.value?.artist.mvSize}`,
      name: 'mv',
      component: MvTab,
    },
    {
      label: `详情`,
      name: 'desc',
      component: DescTab,
    },
  ]
}

getArtistInfo()

const activeName = ref<string>('music')
</script>

<style lang="less" scoped>
.tabs {
  :deep(.el-tabs__nav-wrap::after) {
    height: 0;
  }
}
</style>
